<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>B站一键三连效果</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="box">
            <div class="item">
                <div class="good">
                    <div class="up"></div>
                </div>
                <div class="circle">
                    <width class="right-circlr"></width>
                    <width class="left-circlr"></width>
                </div>
                <div class="ring"></div>
                <div class="oval-bar-box-little">
                    <div class="oval-bar-little"></div>
                    <div class="oval-bar-little"></div>
                    <div class="oval-bar-little"></div>
                    <div class="oval-bar-little"></div>
                </div>
                <div class="oval-bar-box-larger">
                    <div class="oval-bar-larger"></div>
                    <div class="oval-bar-larger"></div>
                    <div class="oval-bar-larger"></div>
                    <div class="oval-bar-larger"></div>
                </div>
            </div>

            <div class="item">
                <div class="coin">
                    <div class="half-circle"></div>
                    <div class="circle-bar"></div>
                </div>
                <div class="circle">
                    <width class="right-circlr"></width>
                    <width class="left-circlr"></width>
                </div>
                <div class="ring"></div>
                <div class="oval-bar-box-little">
                    <div class="oval-bar-little"></div>
                    <div class="oval-bar-little"></div>
                    <div class="oval-bar-little"></div>
                    <div class="oval-bar-little"></div>
                </div>
                <div class="oval-bar-box-larger">
                    <div class="oval-bar-larger"></div>
                    <div class="oval-bar-larger"></div>
                    <div class="oval-bar-larger"></div>
                    <div class="oval-bar-larger"></div>
                </div>
            </div>

            <div class="item">
                <div class="start">
                    <div class="angle top"></div>
                    <div class="angle right"></div>
                    <div class="angle left"></div>
                    <div class="angle right-bottom"></div>
                    <div class="angle left-bottom"></div>
                </div>
                <div class="circle">
                    <width class="right-circlr"></width>
                    <width class="left-circlr"></width>
                </div>
                <div class="ring"></div>
                <div class="oval-bar-box-little">
                    <div class="oval-bar-little"></div>
                    <div class="oval-bar-little"></div>
                    <div class="oval-bar-little"></div>
                    <div class="oval-bar-little"></div>
                </div>
                <div class="oval-bar-box-larger">
                    <div class="oval-bar-larger"></div>
                    <div class="oval-bar-larger"></div>
                    <div class="oval-bar-larger"></div>
                    <div class="oval-bar-larger"></div>
                </div>
            </div>
        </div>
        <script>
            const good = document.querySelector(".item");
            const box = document.querySelector(".box");
            let flag,time;
            good.onmousedown = ()=>{
                box.classList.add("nb");
                time = Date.now();
               
            }
            good.onmouseup = ()=>{
                if(Date.now()-time>4000) return; 
                box.classList.remove("nb");
            }
        </script>
    </body>
</html>
